import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Layout } from 'antd';
import MainSidebar from '@/layouts/components/MainSidebar';
import Topbar from '@/layouts/components/Topbar';
import { useUserStore } from '@/store';

const { Content } = Layout;

const AppLayout: React.FC = () => {
  const { isLogin } = useUserStore();
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  const handleSidebarCollapse = (collapsed: boolean) => {
    setSidebarCollapsed(collapsed);
  };

  if (!isLogin) {
    return (
      <div className="min-h-screen bg-gray-50">
        <Outlet />
      </div>
    );
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <MainSidebar
        collapsed={sidebarCollapsed}
        onCollapse={handleSidebarCollapse}
      />
      <Layout
        style={{
          marginLeft: sidebarCollapsed ? 80 : 200,
          transition: 'margin-left 0.2s',
        }}
      >
        <Topbar />
        <Content className="layout-content" style={{
          margin: '24px 16px',
          padding: 24,
          minHeight: 280,
        }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default AppLayout;